<link rel="stylesheet" type="text/css" href="__CSS__/gonggantu.css" />
<link rel="stylesheet" type="text/css" href="__CSS__/float_window.css" />
<link rel="stylesheet" type="text/css" href="__CSS__/bootcssButtons.css" />

{include file="index/canvas_structure" /}


<!--<div style="margin-left: 20px"><text>目标用户：{$targetUser}</text></div>-->

<!--目标用户左边浮窗-->
<div id="target_user_window" style="text-align:center;position:fixed;z-index:99;left: 1%;top: 30%;width: 185px;height:185px;border: 3px ridge;background-color: rgba(111,177,223,0.34);">

        <!--<a  href="javascript:if($('#changeTargetUser').css('display')=='none'){ $('#changeTargetUser').show();$('#changeUserSpan').html('点击收起');}else {$('#changeTargetUser').hide();$('#changeUserSpan').html('更改用户');}" class="edit" style="max-width: 100%;" title="更改">
            <span id="changeUserSpan" style="font-size: 15px;">更改用户</span></a>

        <!--更改目标用户后续
        <div class="" id="changeTargetUser" style="display:none;position:absolute;left: 100%;top: 5%;width: 80px;">
            <form method="post" onsubmit="return checkChangeTargetUser()" action="{:url('index/changeGonggantuUser')}">
                <input type="text" id="newTargetUser" name="newTargetUser" style="width: 100px;background-color: rgba(13,0,9,0.69);color:white;height: 25px;">
                <input type="hidden" name="toolId" value="{$toolId}"/>
                <button type="submit" class="button button-highlight button-rounded button-small" style="color:black;background-color:#ff9046;font-size: 10px;margin-top: 8px;">确定</button>
            </form>
        </div>-->


    <div style="margin-top: 15px;">
        <img id="targetUserImg" src="__IMG__/target_user_icon.png" style="width: 117px;height: 117px;">
    </div>
    <div>目标用户：<br>
        <text style="color: red;">*</text>

        <div class="tooltip">
            <input class="extraInfoInput" oninput="
                var data = new Object();
                data.toolId = '{$toolId}';
                data.info =$(this).val();
                data.type = 'changeTargetUser';
                ws.send(JSON.stringify(data));"
                   id="newTargetUser" value="{$targetUser}" maxlength="100" placeholder="在此输入目标用户" onmouseover="$(this).css('border-bottom','1px solid black')" onmouseout="$(this).css('border-bottom','2px solid transparent')" style="background:inherit;border: none;border-bottom: 2px solid transparent;white-space: nowrap;overflow: hidden;text-overflow: ellipsis;width: 170px;"/>

            <div class="tooltiptext" style="width: 150px;">修改目标用户</div>
        </div>

    </div>
</div>


<div style="width: 100%;text-align: center;font-size: 30px;">
    <div style="width: 130px;position: relative;margin-left: 45%;">
        共感图

        <div class="tooltip" style="width: 24px;height: 24px;position: absolute;top: 0%;left: 100%;">

            <img style="width: 24px;height: 24px;position: absolute;top: 0%;left: 0%;" src="__IMG__/explaination.png">

            <span class="tooltiptext" style="text-align:left;font-size: 14px;">用拟人化的方法，帮助我们将注意力集中在用户身上，通过收集大量信息，了解目标用户所想、所听、所见、所说，以此明确用户的痛点和需求点。
            </span>
        </div>

    </div>
</div>



<!--具体条目分块-->
<!--1.所想&所感；2.所听-->
<div class="table_row_main" style="display:table;min-height:200px;margin-left: 220px;margin-top: 10px;clear: both;">

    {volist name="types" id="t" offset="0" length="2"}

    <div class="typeBlock" id="typeBlock_{$t.id}"  ondrop="drop(event)" ondragover="allowDrop(event)">
        <div class="title">
            <text>{$t.type_name}</text>
            <div class="tooltip ">
                <!--<div class="addBtn" onclick="addRecord('{$toolId}','{$t.id}','{$_COOKIE['user']}')">
                    <img src="__IMG__/add_record.png">
                </div>-->

                {if condition="$t.type_name == '所想&所感'"}
                <span class="tooltiptext">目标用户的 Think & Feel
                    <br/>真实的想法、担心、愿景
                </span>
                {else/}
                <span class="tooltiptext">目标用户的 Hear <br/>会影响到他的人怎么说</span>
                {/if}
            </div>
        </div>


        <div class="msg"  id="msg_{$t.id}">
            {volist name="records" id="r"}

            {if condition="$r.type_name == $t.type_name "}

                {include file="index/business_canvas_template" /}


            {/if}
            {/volist}
        </div>


            <button style="position:relative;width: 450px;height: 100px;font-size: 16px;margin:50px 0 0 30px;border-color:#D9D9D9;padding:0;" class="addBtn button button-border" onclick="addRecord('{$toolId}','{$t.id}','{$_COOKIE['user']}')">
                <div style="position:absolute;top:15%;left: 40%;height: 70px;width: 70px;" class="add_prj"></div>
            </button>


    </div>

    {/volist}
</div>


<!--3.所见；4.所说&所做-->
<div class="table_row_main" style="display:table;min-height:200px;margin-left: 220px;">

    {volist name="types" id="t" offset="2" length="2"}

    <div class="typeBlock" id="typeBlock_{$t.id}"  ondrop="drop(event)" ondragover="allowDrop(event)">
        <div class="title">
            <text>{$t.type_name}</text>

            <div class="tooltip ">
            <!--<div class="addBtn" onclick="addRecord('{$toolId}','{$t.id}','{$_COOKIE['user']}')">
                <img src="__IMG__/add_record.png">
            </div>-->

                {if condition="$t.type_name == '所见'"}
                <span class="tooltiptext">目标用户的 See
                    <br/>周边环境、周边的人是怎样的
                </span>
                {else/}
                <span class="tooltiptext">目标用户的 Say & Do <br/>
                    态度、行为
                </span>
                {/if}
            </div>
        </div>


        <div class="msg" id="msg_{$t.id}">
            {volist name="records" id="r"}

            {if condition="$r.type_name == $t.type_name "}

                {include file="index/business_canvas_template" /}

            {/if}
            {/volist}
        </div>

            <button style="position:relative;width: 450px;height: 100px;font-size: 16px;margin:50px 0 0 30px;border-color:#D9D9D9;padding:0;" class="addBtn button button-border" onclick="addRecord('{$toolId}','{$t.id}','{$_COOKIE['user']}')">
                <div style="position:absolute;top:15%;left: 40%;height: 70px;width: 70px;" class="add_prj"></div>
            </button>

    </div>

    {/volist}
</div>


<!--附加：痛点；需求点-->
<div id="table_row_extra" style="display:table;min-height:200px;margin-left: 220px;margin-top: 10px;">

    {volist name="types" id="t" offset="4" length="2"}

    <div class="typeBlock" id="typeBlock_{$t.id}"  ondrop="drop(event)" ondragover="allowDrop(event)">
        <div class="title" style="text-align: center;">
            <text>{$t.type_name}</text>

            <div class="tooltip ">
                <!--<div class="addBtn" onclick="addRecord('{$toolId}','{$t.id}','{$_COOKIE['user']}')">
                    <img src="__IMG__/add_record.png">
                </div>-->

            </div>
        </div>


        <div class="msg" id="msg_{$t.id}">
            {volist name="records" id="r"}

            {if condition="$r.type_name == $t.type_name "}

            {include file="index/business_canvas_template" /}

            {/if}
            {/volist}
        </div>


            <button style="position:relative;width: 450px;height: 100px;font-size: 16px;margin:50px 0 0 30px;border-color:#D9D9D9;padding:0;" class="addBtn button button-border" onclick="addRecord('{$toolId}','{$t.id}','{$_COOKIE['user']}')">
                <div style="position:absolute;top:15%;left: 40%;height: 70px;width: 70px;" class="add_prj"></div>
            </button>

    </div>

    {/volist}
</div>



</div><!--closing tag for wholeCanvas div-->



<!--帮助模块-->
<div class="help_block" id="help_block_1" style="position:fixed;display:none;top:30%;left:220px;width: 220px;height: 138px;">
    <text>共感图用来分析项目的目标用户，所以第一步先为目标用户取一个名字吧！</text>


    <div onclick="gonggantu_help_2()" class="help_next_step" style="">
    下一步
    </div>

    <div onclick="gonggantu_help_complete()" class="help_skip_step" style="">
        跳过
    </div>
</div>


<div class="help_block_left" id="help_block_2" style="display:none;top:300px;left:0%;width: 220px;height: 138px;">
    <text>接下来，就可以尽可能的站在用户的角度，去分析他的所思所想、所听、所见、所说所做。</text>


    <div onclick="gonggantu_help_3()" class="help_next_step" style="">
        下一步
    </div>

    <div onclick="gonggantu_help_complete()" class="help_skip_step" style="">
        跳过
    </div>
</div>

<div id="help_block_3" style="display:none;position:absolute;width:100%;height: 200px;top:1050px;left:0%;">
<div class="help_block_left"  style="width: 220px;height: 138px;">
    <text>最后根据用户的所思所想，总结用户真正的痛点和需求点。</text>


    <div onclick="gonggantu_help_complete()" class="help_next_step" style="">
        完成
    </div>
</div>
</div>


<script>

    //点击除输入框以外的任意位置，更改目标用户
    var oldTargetUser = '{$targetUser}';
    $(document).click(function(e){
        var _con = $('#newTargetUser');   // 设置目标区域

        var newTargetUser = $('#newTargetUser').val();
        var toolId = '{$toolId}';

        if(!_con.is(e.target) && _con.has(e.target).length === 0){
            if(newTargetUser != oldTargetUser) {

                $.ajax({
                    type: "POST",
                    url: "__PUBLIC__/index/index/changeGonggantuUser",
                    data: {
                        toolId: toolId,
                        newTargetUser: newTargetUser
                    },
                    success: function (result) {
                        oldTargetUser = newTargetUser;

                        toastr.info('目标用户修改已自动保存~');
                        setTimeout(function () {
                            toastr.clear();
                        }, 4000);
                        //console.log(result);
                        //window.location.reload();
                    }
                });
            }
        }
    });


    function gonggantu_help_1() {

        $('#cover').css('display','block');
        $('#cover').css('height','100%');

        $('#target_user_window').css('z-index',999);
        $('#help_block_1').show();
        $('#help_block_1').css('z-index',999);
    }

    function gonggantu_help_2() {

        $('html,body').animate({scrollTop: 0}, 1000, null,function () {
            $('#cover').css('display', 'block');
            $('#cover').css('height', '100%');

            $('#target_user_window').css('z-index', 99);
            $('#help_block_1').hide();

            //$('.table_row_main').css('z-index',102);
            $('#help_block_2').show();
            $('#help_block_2').css('z-index', 999);
        })
    }


    function gonggantu_help_3() {
        //window.scrollTo(0,document.body.scrollHeight);
        var top_tmp = $('#table_row_extra').offset().top;

        $('html,body').animate({scrollTop: top_tmp}, 1000, null,function () {
            $('#cover').css('display','block');
            $('#cover').css('height','100%');

            $('#help_block_2').hide();


            $('#help_block_3').show();
            $('#help_block_3').css('top',top_tmp);
            $('#help_block_3').css('z-index',999);
        });

    }


    function gonggantu_help_complete() {
        $('#cover').hide();
        $('#help_block_1').hide();
        $('#help_block_2').hide();
        $('#help_block_3').hide();
        $('#target_user_window').css('z-index',99);
    }

    setTimeout(function () {
        var allText = $(".record_area");

        //console.log(allText);
        for (var i = 0; i < allText.length; i++) {
            autoTextarea(allText[i]);// 调用
        }
    }, 0);

/*
    //生成随机数
    var randomNum = Math.floor(Math.random()*6 + 1);
    //console.log(randomNum);
    var targetUserImg = $('#targetUserImg').attr('src');
    var newImgPath = targetUserImg.substring(0,targetUserImg.length - 5) + randomNum + ".jpg";

    //console.log(newImgPath);
    $('#targetUserImg').attr('src',newImgPath);*/




</script>